<template>
  <div class="cmp cmp-tools-list">
    <form class="form">
      <fieldset v-for="(v,i) in listData" :key="i">
        <legend>{{v.category}}</legend>
        <div class="navigator-list">
          <div class="navigator-item" v-for="(item,index) in v.list" :key="`${i}_${index}`"
            @click="clickNavigatorItem(item)"
          >{{item.label}}</div>
        </div>
      </fieldset>
    </form>
  </div>
</template>

<script>
export default {
  name: 'cmp-tools-list',
  data () {
    return {
      listData: [
        {category: '文件操作', list: [
          {label: '文本分割器', routeName: 'txt-split'},
          {label: '查找重复文件', routeName: 'find-samefile'},
          {label: '批量修改文件名', routeName: 'raname-batch'},
          {label: '基于Excel数据重命名文件', routeName: 'rename-by-excel'},
          {label: '基于名称池重命名文件', routeName: 'rename-by-namepool'},
          {label: '计算文件夹大小', routeName: 'directory-size'},
          {label: '文档阅读器', routeName: 'reader'},
          {label: '图片压缩&格式转换', routeName: 'img-compress'},
          {label: '图片转PDF', routeName: 'img2pdf'},
          {label: '图片去水印', routeName: 'watermark-remove'},
          {label: '视频&图片去水印(FFmpeg)', routeName: 'watermark-remove-ffmpeg'},
          {label: '图片批量滤镜处理', routeName: 'img-filter'},
          {label: '图片批量滤镜处理（alloyImage）', routeName: 'img-filter-alloyImage'},
          {label: '图片相似度计算', routeName: 'img-similarity'},
          {label: '图片变黑白线稿', routeName: 'img-diagram'},
          {label: '图片隐写术(ImageData)', routeName: 'hide-in-image'},
          {label: '文件隐写术', routeName: 'hide-in-file'},
          {label: 'OCR图片文字识别', routeName: 'ocr'},
          {label: '批量修改mp4的meta信息位置', routeName: 'mp4-meta-position'},
          {label: '视频转GIF', routeName: 'video2gif'},
          {label: '音频批量处理', routeName: 'audio-batch'},
          {label: '提取Office文件中的图片', routeName: 'office2images'},
          {label: '字幕格式srt转vtt', routeName: 'srt2vtt'},
        ]},
        {category: '加密解密', list: [
          {label: '条形码/二维码生成&识别', routeName: 'qrcode'},
          {label: '矩阵加密解密(数字坐标)', routeName: 'matrix-decrypt'},
          {label: '培根加密解密', routeName: 'bacon-decrypt'},
          {label: '栅栏密码加密解密', routeName: 'fence-decrypt'},
          {label: '移位密码(凯撒)', routeName: 'caesar-decrypt'},
          {label: '移位密码(简单)', routeName: 'transposition-cipher'},
          {label: '移位密码(云影)', routeName: 'cloudshadow-cipher'},
          {label: '替代密码(埃特巴什码)', routeName: 'atbash-cipher'},
          {label: '替代密码(仿射)', routeName: 'affine-cipher'},
          {label: '猪圈密码', routeName: 'pigpen-cipher'},
          {label: '跳舞的小人', routeName: 'people-cipher'},
          {label: 'JSON Web Token', routeName: 'jwt'},
          {label: '编码转换器', routeName: 'transcoding'},
          {label: '微信DAT文件解码', routeName: 'wxdat-decrypt'},
          {label: '云音乐缓存文件解码', routeName: 'wyuc-decrypt'},
          {label: '数独求解', routeName: 'sudoku-decrypt'},
          {label: '24点求解', routeName: 'game24-decrypt'},
          {label: 'AES/DES/3DES加解密', routeName: 'aesdes-cipher'},
          {label: 'M3U8播放&下载', routeName: 'm3u8-player'},
          {label: 'OB混淆解密', routeName: 'obfuscator-decode'},
          {label: 'Sojson混淆解密', routeName: 'sojson-decode'},
          {label: 'ASAR逆向辅助', routeName: 'asar-reverse'},
          {label: '本地HLS视频文件解密', routeName: 'localmedia-decrypt'},
          {label: '本地WIFI密码查看器', routeName: 'localwifi-password'},
          {label: '京师书法ZIP文件加密解密', routeName: 'jssfzip-decrypt'},
          {label: '京师书法离线文件加密解密', routeName: 'jssffile-decrypt'},
          {label: '数字教材DAT文件加密解密', routeName: 'jssfdat-decrypt'},
          {label: '浏览器密码查看器', routeName: 'browser-password'},
        ]},
        {category: '网络探测', list: [
          {label: '端口扫描器(Web)', routeName: 'portscan-web'},
          {label: '端口扫描器(NodeJS)', routeName: 'portscan-nodejs'},
          {label: 'IP位置查询', routeName: 'ip-location'},
          {label: '资源搜索助手', routeName: 'search-helper'},
          {label: '直播视频下载', routeName: 'live-downloader'},
          {label: '简易邮件发送', routeName: 'mail'},
          {label: '网络爬虫', routeName: 'web-crawler'},
          {label: '网站敏感信息探测', routeName: 'website-important-info'},
        ]},
        // {category: '亲子教育', list: [
        // ]},
        {category: '未分类', list: [
          {label: '幸运抽奖', routeName: 'lottery'},
          {label: '串口调试工具', routeName: 'serialport-debug'},
          {label: 'Flash播放器', routeName: 'flash-player'},
          {label: 'RTSP播放器', routeName: 'rtsp-player'},
          {label: 'RTSP播放器(canvas)', routeName: 'rtsp-player-canvas'},
          {label: '本地敏感信息检查', routeName: 'important-info'},
          {label: '在线工具收集', routeName: 'online-tools'},
          {label: '汉字转拼音读物', routeName: 'chinese2pinyin'},
          {label: '字帖生成器', routeName: 'copybook-builder'},
          {label: '印章生成器', routeName: 'seal-generator'},
          {label: '身份证生成器', routeName: 'idcard-generator'},
          {label: '随机密码生成器', routeName: 'pwdrnd-generator'},
          {label: '屏幕共享服务端（WebRTC）', routeName: 'screenshare-webrtc'},
          // {label: '网页录屏', routeName: 'screencap-web'},
          {label: '通过WEB服务访问ZIP压缩包', routeName: 'jssfzip-webserver'},
          {label: '京师书法课件资源下载器', routeName: 'jssfres-download'},
          {label: '京师书法课件资源下载器(旧)', routeName: 'jssfres-download2'},
        ]}
      ]
    }
  },
  methods: {
    clickNavigatorItem (item) {
      this.$router.push({name: item.routeName})
      this.$emit('close')
    }
  }
}
</script>

<style scoped lang="less">
@import "~@/assets/css/_mixins.less";
@import "~@/assets/css/_color.less";

.form {
    fieldset {
        display: block;
        margin-inline-start: 2px;
        margin-inline-end: 2px;
        padding-block-start: 0.35em;
        padding-inline-start: 0.75em;
        padding-inline-end: 0.75em;
        padding-block-end: 0.625em;
        min-inline-size: min-content;
        border: 1px solid #bbb;
        border-radius: 6px;
        & + fieldset {
            margin-top: 1em;
        }
        .navigator-list {
            display: flex;
            flex-wrap: wrap;
            color: #444;
        .navigator-item {
            // margin: 0 .1em .1em;
            // padding: .25em .45em;
            margin: 0 .5em .5em;
            padding: .25em .5em;
            cursor: pointer;
        }
        }
    }
    legend {
        padding: 0 .5em;
        font-size: 1rem;
        color: #888;
        float: none;
        width: auto;
    }
    textarea {
        resize: none;
    }
}
</style>
